<template>
  <input-box title="修改密码">
    <div slot='body'>
      <el-form ref="changePasswordForm" label-width="6rem" :model="passwordForm" :rules="rules" label-position="right"
               label-suffix="：">
        <el-form-item label="旧密码" prop="old_password">
          <el-input type="password" v-model="passwordForm.old_password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input type="password" v-model="passwordForm.password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="password_confirmation">
          <el-input type="password" v-model="passwordForm.password_confirmation"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button type="primary" size="small" @click.native.prevent="changePasswordBtn('changePasswordForm')">修改密码</el-button>
    </div>
  </input-box>
</template>
<script>
  import { mapGetters } from 'vuex';
  import {profileChangePassword} from '../../services/index';
  import remoteValidatorMixin from "../../components/mixin/RemoteValidatorMixin"
  export default {
    mixins: [remoteValidatorMixin],
    data () {
      return {
        dataItem:"passwordForm",
        passwordForm: {
          id: 0,
          old_password: '',
          password: '',
          password_confirmation: ''
        },
        rules: {}
      };
    },
    created(){
        this.passwordForm.id = this.authUser.id;

    },
    computed: {
      ...mapGetters([
        'authUser'
      ])
    },
    methods: {
      changePasswordBtn (formName){
        let self = this;
        this.remoteValidate(this, formName, profileChangePassword).then(function (data) {
          self.passwordForm={
            old_password: '',
            password: '',
            password_confirmation: ''
          };
          self.$message({
            showClose: true,
            message: '修改成功'
          });
        }, function (data) {

        });

      }
    }

  };
</script>
